<template>
	<view class="container bg-white padding" style="height: 100vh;">
		<view class="font-16 text-999 text-center" style="margin-top: 34px;">欢迎来到</view>
		<view class="text-center" style="margin-top: 30px;">
			<image src="/static/image/logoTitle.png" mode="aspectFill" style="height: 30px;width: 120px;"></image>
		</view>
		<view class="margin-top-lg" style="margin-top: 110px;" v-if="loginType==1">
			<view class="bg-white flex justify-center align-center positionCard">
				<view class="change-text"  @click="loginType=2">手机号登录</view>
				<view style="position: absolute;right: 0;top:40px">
					<view class="text-center content-card padding">
						<view style="position: absolute;top: -50px;left: 0">
							<view class="bg-white flex justify-center align-center active-tab-box">
								<view class="active-text">账号登录</view>
								<view class="active-tab">
									<view class="tab" ></view>
								</view>
								
							</view>
						</view>
						<view class="padding font-16">
							<input type="text" class="text-input" v-model="mobile" placeholder-style="color:#D9D9D9" placeholder="请输入账号"/>
							<input type="password" class="text-input" v-model="password" placeholder-style="color:#D9D9D9"  placeholder="请输入密码"/>
						</view>
						<view class="padding-lr-lg font-16 flex justify-end align-center text-999" style="height: 24px;">
							找回密码
						</view>
						<view>
							<button class="cu-btn round bg-main-green margin-tb-sm lg text-white" style="width: 100%;" :style="mobile?'':'opacity: 0.7;'">登录</button>
						</view>
						

					</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="margin-top-lg" style="margin-top: 110px;" v-if="loginType==2">
			<view class="bg-white flex justify-center align-center positionCard2">
				
				<view class="change-text" @click="loginType=1">账号登录</view>
				<view style="position: absolute;left:0;top:40px">
					<view class="text-center content-card2 padding">
						<view style="position: absolute;top: -50px;right: 0;">
							<view class="bg-white flex justify-center align-center active-tab-box2">
								<view class="active-text">手机号登录</view>
								<view class="active-tab2">
									<view class="tab" style="box-shadow: rgba(0, 0, 0, 0.1) -7px -4px 10px -4px;"></view>
								</view>
							</view>
						</view>
						<view class="padding font-16">
							<input type="text" v-model="mobile" class="text-input" placeholder-style="color:#D9D9D9" placeholder="请输入手机号"/>
							<view class="flex justify-between align-center" style="border-bottom:1px solid #D9D9D9">
								<input v-model="capcha" type="password" class="text-input" style="border: 0;" placeholder-style="color:#D9D9D9"  placeholder="请输入验证码"/>
								<button class="cu-btn round bg-thema-green margin-tb-sm sm text-white" v-if="canSend" @click="sendCode">获取验证码</button>
								<button class="cu-btn round bg-thema-green-light margin-tb-sm sm text-thema-green" v-if="!canSend">重新发送({{sendText}})</button>
							</view>
							
						</view>
						<view class="padding-lr-lg font-16 flex justify-end align-center text-999" style="height: 24px;">
						</view>
						<view>
							<button class="cu-btn round bg-main-green margin-tb-sm lg text-white" style="width: 100%;" :style="mobile?'':'opacity: 0.7;'">登录</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				capcha: '',
				logining: false,
				loginType:1,
				canSend: true,
				sendText:60
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#FFFFFF',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		methods: {
			sendCode(){
				if(!this.canSend){
						return
					}
					this.canSend = false
					let timer = setInterval(()=>{
						this.sendText--
						if(this.sendText<=0){
							clearInterval(timer)
							this.canSend = true
							this.sendText = 60
						}
					},1000)
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},
			toRegist() {
				this.$api.msg('去注册');
			},
			async toLogin() {
				//验证必填
				if (!this.mobile) {
					uni.showToast({
						title: "请输入账号",
						icon: 'none'
					})
					return;
				}

				if (!this.password) {
					uni.showToast({
						title: "请输入密码",
						icon: 'none'
					})
					return;
				}


				try {
					let res = await this.$http.post("https://testapi.cnslpa.com/api/Login/Login", {
						login: this.mobile,
						pwd: this.password
					});
					console.log(res);
					if (!res || !res.Data || !res.Data.userCode) {
						uni.showToast({
							title: res.PromptMsg,
							icon: 'none'
						})
						return
					}

					let loginOwnRes = await this.loginByOwn(res.Data.userCode)
					this.logining = false;
					console.log(loginOwnRes)
					if (loginOwnRes) {
						res.Data.token = loginOwnRes
					} else {
						res.Data.token = res.Data.userCode
					}
					this.logining = true;
					await this.$store.dispatch('eduUser/login', res.Data)
					this.$store.dispatch('user/reurl')
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: "登录失败",
						icon: 'none'
					})
					this.logining = false;
				}
			},
			async loginByOwn(code) {
				console.log("code====>", code, this.$api.edu.loginByOwn)
				try {
					let res = await this.$http.get(this.$api.edu.loginByOwn, {
						params: {
							'code': code
						}
					});
					return res.token
				} catch (e) {

				}
			}
		}

	}
</script>

<style lang='scss'>
	.text-input{
		height: 54px;
		text-align: left;
		border-bottom:1px solid #D9D9D9
	}
	.change-text{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
	}
	.active-text{
		    height: 100%;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    border-bottom: 2px solid #6FCF97;
		    font-size: 16px;
		    color: #333;
		    font-weight: bold;
	}
	.positionCard {
		position: relative;
		width: 172px;
		padding-bottom: 15px;
		height: 50px;
		font-size: 14px;
		background-color: #F4F2F1;
		border-radius: 0px 15px 0px 0px;
		margin-left: calc(100% - 180px);
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		margin-left: 90px;
		color: #666;
	}
	
	.positionCard2 {
		position: relative;
		width: 172px;
		padding-bottom: 15px;
		height: 50px;
		font-size: 14px;
		background-color: #F4F2F1;
		border-radius: 15px 0px 0px 0px;
		margin-right: calc(100% - 180px);
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		margin-left: -90px;
		color: #666;
	}

	.content-card {
		box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 15px;
		width: 350px;
		height: 252px;
		position: relative;
		background-color: #fff;
		border-radius: 0px 15px 15px 15px;
	}
	
	.content-card2 {
		box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 15px;
		width: 350px;
		height: 252px;
		position: relative;
		background-color: #fff;
		border-radius: 15px 0px 15px 15px;
	}

	.active-tab-box {
		width: 172px;
		height: 56px;
		box-shadow: rgba(0, 0, 0, 0.1) -7px -4px 10px -4px;
		font-size: 14px;
		border-radius: 15px 0 0 0;
	}

	.active-tab {
		position: absolute;
		right: -15px;
		top: -50px;
		
	}
	
	.active-tab-box2 {
		width: 172px;
		height: 56px;
		box-shadow: rgba(0, 0, 0, 0.1) 7px -4px 10px -4px;
		font-size: 14px;
		border-radius: 0px 15px 0 0;
	}
	
	.active-tab2 {
		position: absolute;
		left: -15px;
		top: -50px;
		
	}

	.tab {
		box-shadow: rgba(0, 0, 0, 0.1) 7px -4px 10px -4px;
		width: 50px;
		height: 101px;
		background: #fff;
		border-radius: 15px 15px 0 0;
		position: relative;
		-webkit-transform: perspective(60px) rotateX(9deg);
		transform: perspective(60px) rotateX(27deg);
		-webkit-transform-origin: center bottom;
		transform-origin: center bottom;
	}

	.tab::before,
	.tab::after {
		content: '';
		position: absolute;
		width: 15px;
		height: 15px;
		bottom: 0;
		background: #000;
	}

	.tab::before {
		left: -14px;
		background: radial-gradient(circle at 0 0,
				transparent 15px,
				#fff 15px);
	}

	.tab::after {
		right: -14px;
		background: radial-gradient(circle at 100% 0,
				transparent 15px,
				#fff 15px);
	}
</style>